<form action="#" name="searchForm">
	<h2>ComboBox示例</h2>
	<p>基本的ComboBox</p>
	<div style="margin:20px 0"></div>
	<select class="easyui-combobox" name="state" style="width:200px;">
		<option value="AL">Alabama</option>
		<option value="AK">Alaska</option>
		<option value="AZ">Arizona</option>
	</select>
	
	<p>动态的ComboBox</p>
	<input class="easyui-combobox" style="width: 152px;" id="dynaCBox" />
	
	<p>Data属性直接赋值</p>
	<input class="easyui-combobox" style="width: 152px;" id="dataCBox" />
	
	<p>groupField属性：分组。（groupField不会按分组排序后再展示，所以展示前一定要按分组将json数据排序好）</p>
	<input class="easyui-combobox" style="width: 152px;" id="groupCBox" />
	
	<p>mode属性：加载方式。（可选值：remote、local。输入option的value全名，可以定位到该属性）</p>
	<input class="easyui-combobox" style="width: 152px;" id="modeCBox" />
	
	<p>filter属性：定时如何过滤本地数据，返回true时，允许行显示。（仅在mode=local时生效。<font color="red">输入拼音试试</font>）</p>
	<input class="easyui-combobox" style="width: 152px;" id="filterCBox" />

	<p>groupFormatter属性：分组样式。（仅在使用groupField时有效，用于指定groupField样式）</p>
	<input class="easyui-combobox" style="width: 152px;" id="groupFormatCBox" />

	<p>formatter属性：选项样式。</p>
	<input class="easyui-combobox" style="width: 152px;" id="formatterCBox" />
	
	<p>【事件】</p>
	<input class="easyui-combobox" style="width: 152px;" id="eventCBox" />
	<a href="#" onclick="$('#searchForm').reset();" class="easyui-linkbutton" data-options="">重置</a>
	<script type="text/javascript">
		$("#eventCBox").combobox({
			url : './data.json',
			textField : 'text',
			valueField : 'id',
			// 用于提交时，改变参数的值
			onBeforeLoad : function (param) {
				param.city='0311';
			},
			// 加载数据成功时触发
			onLoadSuccess : function () {
				// alert("加载成功");
			},
			// 加载数据失败时触发
			onLoadError : function () {
				alert("加载失败");
			},
			// 用户选择列表项时触发
			onSelect : function (record) {
				alert("选择：" + JSON.stringify(record));
			},
			// 在用户取消选择列表项时触发
			onUnselect : function (record) {
				alert("取消选择：" + JSON.stringify(record));
			}
		});
	</script>
	
	<p>【方法】</p>
	<input class="easyui-combobox" style="width: 152px;" id="methodCBox" />
	<a href="#" onclick="alert(JSON.stringify($('#methodCBox').combobox('options')));" class="easyui-linkbutton" data-options="">options</a>
	<a href="#" onclick="alert(JSON.stringify($('#methodCBox').combobox('getData')));" class="easyui-linkbutton" data-options="">getData</a>
	<a href="#" onclick="loadData()" class="easyui-linkbutton" data-options="">loadData</a>
	<a href="#" onclick="$('#methodCBox').combobox('reload');" class="easyui-linkbutton" data-options="">reload</a>
	<a href="#" onclick="$('#methodCBox').combobox('clear');" class="easyui-linkbutton" data-options="">clear</a>
	<a href="#" onclick="$('#methodCBox').combobox('select', '0312');" class="easyui-linkbutton" data-options="">select0312</a>
	<!-- unselect 若当前未选择该值，则不作任何操作；否则清空已选值。 -->
	<a href="#" onclick="$('#methodCBox').combobox('unselect', '0312');" class="easyui-linkbutton" data-options="">unselect0312</a>
	<a href="#" onclick="alert($('#methodCBox').combobox('getValue'));" class="easyui-linkbutton" data-options="">getValue</a>
	<a href="#" onclick="$('#methodCBox').combobox('setValue', '0333');" class="easyui-linkbutton" data-options="">setValue</a>
	<a href="#" onclick="$('#methodCBox').combobox('setValue', ['0401', '0402']);" class="easyui-linkbutton" data-options="">setValues</a>
	<script type="text/javascript">
		$("#methodCBox").combobox({
			url : 'data.json',
			textField : 'text',
			valueField : 'id',
			onLoadSuccess : function () {
				var valueField = $(this).combobox("options").valueField;
				var data = $(this).combobox("getData");
				$(this).combobox("select", data[0][valueField]);
			}
		});
		function loadData() {
			$("#methodCBox").combobox("loadData", [{"id":"11","text":"苹果"},
			                                       {"id":"12","text":"梨"}]);
		}
	</script>
	
</form>
	
	
<script type="text/javascript">
	$(function() {
		$("#dynaCBox").combobox({
			url : "data.json",
			textField : "text",
			valueField : "id"
		});
		
		$("#dataCBox").combobox({
			textField : "text",
			valueField : "id",
			data : [{text:'石家庄', id:'0311'},
			        {text:'保定', id:'0312'},
			        {text:'张家口', id:'0313'},
			        {text:'承德', id:'0314'}]
		});

		$("#groupCBox").combobox({
			textField : "text",
			valueField : "id",
			groupField : "group",
			data : [{text:'石家庄', id:'0311', group:'河北省'},
			        {text:'保定', id:'0312', group:'河北省'},
			        {text:'张家口', id:'0313', group:'河北省'},
			        {text:'太原', id:'0221', group:'山西省'},
			        {text:'运城', id:'0222', group:'山西省'}]
		});
		
		$("#groupFormatCBox").combobox({
			url : "group.json",
			textField : "text",
			valueField : "id",
			groupField : "group",
			groupFormatter : function(group) {
				var color = group=="水果" ? "blue" : "red";
				return '<span style="color:' + color + '">' + group + '</span>';
			}
		});
		
		$("#modeCBox").combobox({
			url : "data.json",
			textField : "text",
			valueField : "id",
			mode : "remote"
		});
		
		$("#formatterCBox").combobox({
			url : "data.json",
			textField : "text",
			valueField : "id",
			formatter : function (row) {
				var textField = $(this).combobox("options").textField;
				var valueField = $(this).combobox("options").valueField;
				// 传进来的row为 JSON 串
				return row[textField] + "(" + row[valueField] + ")";
			}
		});
		
		$("#filterCBox").combobox({
			url : "data.json",
			textField : "text",
			valueField : "id",
			filter : function (q, row) {
				var opts = $(this).combobox("options");
				var json = getValue($(this).combobox("getData"),
									opts.valueField,
									row[opts.valueField]);
				return row[opts.textField].indexOf(q) == 0
					|| json['fullname'].indexOf(q) == 0;
			}
		});
		
	});
	
	// 从json数组中遍历，找出key的名称为name，key的值为value的对象
	function getValue(json, name, value) {
		var json;
		$.each(json, function (i, obj) {
			if (obj[name] == value) {
				json = obj;
				return;
			}
		});
		return json;
	}
</script>